<template>
  <el-card>
    <div class="main md-20">
      <el-menu mode="horizontal" :default-active="activeIndex" @select="handleSelect" class="menu">
        <el-menu-item index="1" key="">销售额</el-menu-item>
        <el-menu-item index="2" key="">访问量</el-menu-item>
      </el-menu>
      <!--  -->
      <!-- Radio 单选框 -->
      <el-radio-group v-model="radio" size="default" class="mr-20">
        <el-radio-button label="今天" />
        <el-radio-button label="本周" />
        <el-radio-button label="本月" />
        <el-radio-button label="今年" />
      </el-radio-group>

      <!-- 时间选择器 -->
      <el-date-picker
        v-model="value"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="To"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
      />
    </div>

    <!-- 下半部分 -->
    <div class="buttom">
      <!-- 使用栅格系统 -->
      <el-row :gutter="20">
        <el-col :span="18">
          <LeftView :activeIndex="activeIndex"></LeftView>
        </el-col>
        <el-col :span="6">
          <RightView :activeIndex="activeIndex"></RightView>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 导入两个组件
import LeftView from './components/LeftView/index.vue'
import RightView from './components/RightView/index.vue'
const value = ref('')

// 用于展示高亮
const activeIndex = ref('1')
// 点击切换 实现高亮显示
const handleSelect = (val: string) => {
  activeIndex.value = val
}

const radio = ref('今天')

const shortcuts = [
  {
    text: '上周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    }
  },
  {
    text: '上个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    }
  },
  {
    text: '前三个月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    }
  }
]
</script>

<style lang="scss" scoped>
.main {
  display: flex;
  align-items: center;
  border-bottom: 2px solid #dcdfe6;
  .menu {
    flex: 10;
    border: none;
  }
}
</style>
